<template>
  <div>

    <el-row>
      <el-col :span="2">
        &nbsp
      </el-col>
      <el-col :span="8" id="Coach1">
        <div id="MyCenter-1">
          <i class="el-icon-user"></i>教练中心
          <el-button type="primary" @click="onSubmit" v-if="userInfo.coachState == 3 ">点击平台认证</el-button>
        </div>
        <el-card :body-style="{ padding: '0px' }">
          <img :src="userInfo.coachImage" class="image" alt="暂无信息 请完善信息">
          <div style="padding: 14px;">
            <div>
              用户名：<span>{{ userInfo.coachName }}</span>
              昵称：<span>{{userInfo.coachNickName == null ? "无" : userInfo.coachNickName}}</span>
            </div>
            <div class="bottom clearfix">
              <i class="el-icon-mobile-phone"></i>手机号码：
              <span class="time">{{userInfo.coachPhone}}</span>
              <el-button type="warning" @click="changeImage()" size="small">修改头像</el-button>
            </div>
            <div>
              <el-button type="info" @click="changeMessage()" size="small">修改昵称</el-button>
              <el-button type="danger" @click="changepass()" size="small">修改密码</el-button>
              <el-button type="primary" @click="showSendCode = true" size="small">发送验证码</el-button>
              <el-button type="primary" @click="showUpdatePhone = true" size="small">修改电话号码</el-button>
            </div>

          </div>
        </el-card>
      </el-col>
      <el-col :span="1">
        &nbsp
      </el-col>
      <el-col :span="8">


        <div>
          <el-button @click="addCoachBase" v-if="userInfo.coachRemark==null" type="info">点击完善平台信息</el-button>

        </div>
        <div v-if="userInfo.coachRemark != null">
          特长：{{userInfo.coachRemark}}<br />
          已认证：{{userInfo.coachPersonal == 0 ? "团课教练":"私课教练"}}<br />
          职位：{{ coachTypeName   }}
        </div>
      </el-col>
    </el-row>

    <el-dialog title="完善信息" :visible.sync="showAddCoachBase" width="50%">
      擅长类别:
      <el-select v-model="addBase.coachTypeId" placeholder="请选择">
        <el-option v-for="item in CoachTypeList" :key="item.coachTypeId" :label="item.coachTypeName"
          :value="item.coachTypeId"></el-option>
      </el-select><br>
      成为团课教练/私课教练？:
      <el-select v-model="addBase.coachPersonal" placeholder="请选择">
        <el-option v-for="option in coachPersonalOptions" :key="option.value" :label="option.label"
          :value="option.value"></el-option>
      </el-select><br>
      擅长备注：
      <el-input v-model="addBase.coachRemark" placeholder="请输入特点(请用心填写 有助于您更快接单)" style="width: 50%;"></el-input><br />
      <el-button @click="updateCoachBase" type="primary">确 定</el-button>
      <el-button @click="showAddCoachBase = false">取 消</el-button>
    </el-dialog>


    <el-dialog title="修改昵称" :visible.sync="showUpdatemessage" width="30%">
      昵称:<el-input v-model="currentRow.coachNickName"></el-input>
      <el-button @click="showUpdatemessage = false">取 消</el-button>
      <el-button type="primary" @click="updateMessage()">确 定</el-button>
    </el-dialog>

    <el-dialog title="修改密码" :visible.sync="showUpdatepass" width="20%">
      <el-input placeholder="请输入旧密码"></el-input>
      <el-input v-model="coachPassword" placeholder="请输入修改后的密码"></el-input>
      <el-button @click="showUpdatepass = false">取 消</el-button>
      <el-button @click="updateDoctorPass()" type="primary">确 定</el-button>
    </el-dialog>

    <el-dialog title="发送验证码" :visible.sync="showSendCode" width="30%">
      <el-input v-model="oldPhone" placeholder="请输入旧的手机号"></el-input>
      <el-button @click="showSendCode = false">取 消</el-button>
      <el-button type="primary" @click="sendCode()">发送验证码</el-button>
    </el-dialog>

    <el-dialog title="修改手机号" :visible.sync="showUpdatePhone" width="30%">
      <el-input v-model="oldPhone" placeholder="请输入旧的手机号"></el-input>
      <el-input v-model="verificationCode" placeholder="请输入验证码"></el-input>
      <el-input v-model="newPhone" placeholder="请输入新的手机号"></el-input>
      <el-button @click="showUpdatePhone = false">取 消</el-button>
      <el-button type="primary" @click="updatePhone()">确 定</el-button>
    </el-dialog>

    <el-dialog title="请选择新头像" :visible.sync="showUpdateImage" width="35%">
      新头像：
      <el-upload class="upload-demo" :headers="headers" :data="this.add" name="image" ref="upload"
        action="http://localhost:9091/account/yCoach/updateImage" :file-list="fileList" :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="updateDoctorImage()">立即添加</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <el-button @click="showUpdateImage = false" type="danger" round>取 消</el-button>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "CoachInfo",
    data() {
      return {
        addBase: {},
        CoachTypeList: [], // 查出来供新增的时候选择课程类别
        coachPersonalOptions: [{
            label: "私课教练",
            value: 1
          },
          {
            label: "团课教练",
            value: 0
          }
        ],
        coachForm: {
          coachId: '',
          enterVenueId: 0,
          enterState: 1,
          createTime: new Date().toISOString()
        },
        userInfo: {},
        add: {},
        fileList: [],
        showAddCoachBase: false,
        showUpdatePhone: false,
        showSendCode: false,
        showUpdatepass: false,
        showUpdateImage: false,
        showUpdatemessage: false,
        headers: {},
        coachPassword: "",
        coachPhone: "",
        oldPhone: "",
        newPhone: "",
        verificationCode: "",
        currentRow: {}
      };
    },
    computed: {
      coachTypeName() {
        const type = this.CoachTypeList.find(item => item.coachTypeId === this.userInfo.coachTypeId);
        return type ? type.coachTypeName : '未知';
      }
    },
    methods: {
      //完善教练信息的方法
      updateCoachBase() {
        this.$http.post("account/yCoach/updateCoachBase", this.addBase).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.showAddCoachBase = false;
          this.findUserInfo();
        })
      },
      //查询课程类别 新增的时候选择
      loadListClassType() {
        this.$http.get("/account/yCoachType/seatInfoList").then(resp => {
          this.CoachTypeList = resp.data.data;
        })
      },
      addCoachBase() {
        this.showAddCoachBase = true;
      },
      //表单提交 准备后端需要的参数
      onSubmit() {
        const formData = {
          coachId: this.coachForm.coachId,
          enterVenueId: this.coachForm.enterVenueId,
          enterState: this.coachForm.enterState,
          createTime: this.coachForm.createTime
        };
        // 发送请求后端 教练认证
        this.$http.post('venue/yCoachEnter/addCoachEnterPlate', formData, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
        })
      },
      //修改教练的昵称
      updateMessage() {
        this.$http.post("account/yCoach/updateMessage", this.currentRow, {
          headers: {
            'token': localStorage.getItem("token")
          }
        }).then(resp => {
          if (resp.data.code == "200") {
            //获取昵称
            this.userInfo.coachNickName = resp.data.data.coachNickName;
            this.$message.success("修改昵称成功");
          } else {
            this.$message.error(resp.data.msg);
          }
          this.showUpdatemessage = false;
          this.findUserInfo();
        });
      },
      //显示改变后的昵称
      changeMessage() {
        this.showUpdatemessage = true;
      },
      //修改教练手机号  需要传之前的手机号并发送验证码
      sendCode() {
        this.$http.get("account/yCoach/UpdateCoachPhone", {
          params: {
            mobile: this.oldPhone
          },
          headers: {
            'token': localStorage.getItem("token")
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message.success(resp.data.msg);
          } else {
            this.$message.error(resp.data.msg);
          }
          this.showSendCode = false;
        });
      },
      //修改手机号需要的参数 旧手机号 验证码 新手手机号
      updatePhone() {
        const updateData = {
          oldPhone: this.oldPhone,
          code: this.verificationCode,
          newPhone: this.newPhone
        };
        //调用修改手机号接口
        this.$http.post("account/yCoach/codeCoachUpdate", updateData, {
          headers: {
            'token': localStorage.getItem("token")
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            //如果修改成功就返回新手机号
            this.userInfo.coachPhone = this.newPhone;
            this.$message.success(resp.data.msg);
          } else {
            //失败 报错
            this.$message.error(resp.data.msg);
          }
          this.showUpdatePhone = false;
          this.findUserInfo();
        });
      },
      changePhone() {
        this.showUpdatePhone = true;
      },
      //修改密码
      updateDoctorPass() {
        this.$http.get("account/yCoach/UpdateCoachPassword", {
          params: {
            coachPassword: this.coachPassword
          },
          headers: {
            'token': localStorage.getItem("token")
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.userInfo = resp.data.data;
            this.$message.success(resp.data.msg);
            //当密码修改成功后 跳转教练登录页面
            this.$router.push('/CoachLogin');
          } else {
            this.$message.error(resp.data.msg);
          }
          this.showUpdatepass = false;
        });
      },
      changepass() {
        this.showUpdatepass = true;
      },
      onUploadSuccess(response, file, fileList) {
        if (response.code === 200) {
          this.$message.success(response.msg);
          this.userInfo.coachImage = response.data.image;
        } else {
          this.$message.error(response.msg);
        }
        this.findUserInfo();
      },
      onUploadError(err, file, fileList) {
        this.$message.error('上传失败，请重试');
      },
      updateDoctorImage() {
        this.$refs.upload.submit();
        this.showUpdateImage = false;
      },
      changeImage() {
        this.showUpdateImage = true;
        this.findUserInfo();
      },
      findUserInfo() {
        this.$http.get("account/yCoach/findCoachInfo", {
          headers: {
            'token': localStorage.getItem("token")
          }
        }).then(resp => {
          this.userInfo = resp.data.data;
        });
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    },
    created() {
      this.findUserInfo();
      this.loadListClassType();
      this.headers["token"] = localStorage.getItem("token");
    }
  }
</script>

<style>
  .image {
    width: 100%;
    height: 400px;
    display: block;
  }

  #Coach1 {
    line-height: 50px;
  }

  /* .text {
  font-size: 20px;
}

.item {
  margin-bottom: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}



.img {
  width: 90px;
  height: 90px;
} */
</style>
